<template>
  <div class="app-container">
    <el-row>
      <!-- 左边填写基本信息 -->
      <el-col class="leftModule" :span="18">
        <el-form ref="EtmsCourseAbility" :model="EtmsCourseAbility" label-width="80px" :rules="rules" class="demo-ruleForm">
          <el-col :span="24"><span class="title">基本信息</span></el-col>
          <!-- 上传封面 -->
          <el-col :span="12" style="margin-top: 50px">
            <el-upload class="upload-demo" drag action="string" :show-file-list="false"
              :before-upload="beforeAvatarUpload" :http-request="uploadPicture">
              <img :src="EtmsCourseAbility.etmsCourse.courseCover" width="100%">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">
                上传封面<br><br>可拖曳上传
              </div>
              <div class="el-upload__tip" slot="tip">
                只能上传jpg/png文件，且不超过5MB
              </div>
            </el-upload>
          </el-col>
          <el-col :span="12" style="height: 100px; margin-top: 50px">
            <el-form-item label="课程标题" prop="etmsCourse.courseTitle">
              <el-input v-model="EtmsCourseAbility.etmsCourse.courseTitle" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="height: 130px">
            <el-form-item label="上传人" prop="etmsCourse.createdBy">
              <el-input v-model="EtmsCourseAbility.etmsCourse.createdBy" placeholder="请填写内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程类别" prop="etmsCourse.courseType">
              <el-select v-model="EtmsCourseAbility.etmsCourse.courseType" placeholder="课程类别">
                <el-option v-for="dept in options" :key="dept.key" :label="dept.deptName" :value="dept.deptName">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="必/选修" prop="etmsCourse.courseRequired">
              <el-select v-model="EtmsCourseAbility.etmsCourse.courseRequired" placeholder="必修/选修">
                <el-option label="必修" value="必修"></el-option>
                <el-option label="选修" value="选修"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="难度等级" prop="etmsCourse.courseLevel">
              <el-select v-model="EtmsCourseAbility.etmsCourse.courseLevel" placeholder="难度等级">
                <el-option label="低" value="低"></el-option>
                <el-option label="中" value="中"></el-option>
                <el-option label="高" value="高"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程状态" prop="etmsCourse.courseStatus">
              <el-select v-model="EtmsCourseAbility.etmsCourse.courseStatus" placeholder="课程状态">
                <el-option label="已过时" value="已过时"></el-option>
                <el-option label="流行" value="流行"></el-option>
                <el-option label="小众" value="小众"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课时">
              <el-input v-model="EtmsCourseAbility.etmsCourse.courseHour" placeholder="课时"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训形式" prop="etmsCourse.courseForm">
              <el-select v-model="EtmsCourseAbility.etmsCourse.courseForm" placeholder="线上/线下">
                <el-option label="线上" value="线上"></el-option>
                <el-option label="线下" value="线下"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程描述" prop="etmsCourse.courseDescription">
              <el-input type="textarea" v-model="EtmsCourseAbility.etmsCourse.courseDescription"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24" style="margin-top: 50px"><span class="title">附件上传</span></el-col>
          <el-col :span="6">
            <el-upload class="upload-demo" action="#" :on-change="handleChange" :before-remove="beforeRemove"
              :before-upload="beforeVideoUpload" :http-request="uploadVideo" :limit="1" :file-list="fileList">
              <el-button size="mini" type="primary">点击上传</el-button>
              <div slot="tip" class="el-upload__tip">只能上传mp4文件，且不超过100MB</div>
            </el-upload>
          </el-col>
        </el-form>
      </el-col>
      <el-col class="rightModule_two" :span="6">
        <el-form ref="ruleform" :model="EtmsCourseAbility" label-width="80px" :rules="rules" class="demo-ruleForm">
          <el-col :span="24"><span class="title">培训能力指标设置</span></el-col>
          <el-col :span="24">
            <div class="smallTitle">自我成长</div>
          </el-col>
          <el-col :span="24">
            <div class="smallSmallTitle">
              追求卓越：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[0].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              抗压能力：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[1].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              学习能力：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[2].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              积极主动：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[3].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="smallTitle">人际交往</div>
          </el-col>
          <el-col :span="24">
            <div class="smallSmallTitle">
              沟通能力：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[4].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              团队合作：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[5].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              协作能力：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[6].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              影响说服：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[7].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
            </div>
          </el-col>
          <el-col :span="24">
            <div class="smallTitle">决策执行</div>
          </el-col>
          <el-col :span="24">
            <div class="smallSmallTitle">
              决策判断：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[8].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              高效执行：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[9].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              规划安排：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[10].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br>
              认真负责：
              <el-input-number v-model="EtmsCourseAbility.amSubjectLists[11].score" style="width:100px" :min="0"
                :max="100" :step="5" size="small"></el-input-number>
              <br><br><br>
              <el-button type="primary" @click="submitForm('EtmsCourseAbility')" size="medium">
                创建课程
              </el-button>
              <br><br>
            </div>
          </el-col>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>


<script>
  import {
    findAll
  } from '@/api/dept';
  import {
    addCourse
  } from '@/api/course'
  import {
    uploadPicture
  } from '@/api/course'
  import {
    uploadVideo
  } from '@/api/course'

  export default {
    data() {
      return {
        /* 部门动态生成 */
        options: {},
        fileList: [],
        percentage: 0,
        progress: false,
        EtmsCourseAbility: {
          etmsCourse: {
            courseTitle: "",
            courseDescription: "",
            courseType: "",
            courseLevel: "",
            courseForm: "",
            courseStatus: "",
            courseRequired: "",
            courseCover: '',
            courseAttachment: "",
            courseHour: "",
            createdBy: "",
            courseCover: ""
          },
          amSubjectLists: [{
              amId: '2',
              score: 0,
            },
            {
              amId: '3',
              score: 0,
            },
            {
              amId: '4',
              score: 0,
            },
            {
              amId: '5',
              score: 0,
            },
            {
              amId: '7',
              score: 0,
            },
            {
              amId: '8',
              score: 0,
            },
            {
              amId: '9',
              score: 0,
            },
            {
              amId: '10',
              score: 0,
            },
            {
              amId: '12',
              score: 0,
            },
            {
              amId: '13',
              score: 0,
            },
            {
              amId: '14',
              score: 0,
            },
            {
              amId: '15',
              score: 0,
            },
          ],
        },
        /* 规则限定 */
        rules: {
          "etmsCourse.courseTitle": [{
              required: true,
              message: "请输入课程标题",
              trigger: "blur",
            },
            {
              min: 3,
              max: 20,
              message: "长度在 3 到 20 个字符",
              trigger: "blur",
            },
          ],
          "etmsCourse.createdBy": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsCourse.courseDescription": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsCourse.courseHour": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsItem.trainTeacher": [{
            required: true,
            message: "内容不为空",
            trigger: "blur",
          }, ],
          "etmsCourse.courseType": [{
            required: true,
            message: "请选择课程类别",
            trigger: "change",
          }, ],
          "etmsCourse.courseForm": [{
            required: true,
            message: "请选择课程类型",
            trigger: "change",
          }, ],
          "etmsCourse.courseLevel": [{
            required: true,
            message: "请选择课程类型",
            trigger: "change",
          }, ],
          "etmsCourse.courseRequired": [{
            required: true,
            message: "请选择课程类型",
            trigger: "change",
          }, ],
        },
        imageUrl: "",
      };
    },
    methods: {
      handleChange(file, fileList) {
        const size = file.size / 1024 / 1024 > 0.1 ? `(${(file.size/1024/1024).toFixed(1)}M)` :
          `(${(file.size/1024).toFixed(1)}KB)`
        file.name.indexOf('M') > -1 || file.name.indexOf('KB') > -1 ? file.name : file.name += size
        this.fileList = fileList.slice(-1);
      },
      test(value) {
        alert(value);
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      /* 上传封面前的准备 */
      beforeAvatarUpload(file) {
        var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
        const extension =
          testmsg === "jpg" ||
          testmsg === "JPG" ||
          testmsg === "png" ||
          testmsg === "PNG"

        const isLt5M = file.size / 1024 / 1024 < 5;

        if (!extension) {
          this.$message.error("上传头像图片只能是 JPG/PNG 格式!");
        }
        if (!isLt5M) {
          this.$message.error("上传头像图片大小不能超过 5MB!");
        }
        return extension || isLt5M;
      },
      /* 上传封面 */
      uploadPicture(param) {
        const formdata = new FormData();
        formdata.append("userId", 0);
        formdata.append("file", param.file);
        uploadPicture(formdata).then((res) => {
          // this.imageUrl = res.data;
          this.EtmsCourseAbility.etmsCourse.courseCover = res.data;
          console.log(res);
        });
      },
      /* 上传视频前准备 */
      beforeVideoUpload(file) {
        var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
        const extension =
          testmsg === "mp4"
        const isLt100M = file.size / 1024 / 1024 < 100;
        if (!extension) {
          this.$message.error("上传视频只能是 mp4 格式!");
        }
        if (!isLt100M) {
          this.$message.error("上传视频大小不能超过 100MB!");
        }
        return extension || isLt100M;
      },
      /* 上传视频 */
      uploadVideo(param) {
        const formdata = new FormData();
        formdata.append("id", 0);
        formdata.append("file", param.file);
        /* this.$axios.post('http://localhost:8080/course/uploadVideo', formdata, {
          Headers: {
            "Content-Type": "multipart/form-data"
          },
          //上传进度
          onUploadProgress: (progressEvent) => {
            let num = (parseInt((progressEvent.loaded / progressEvent.total) * 100) | 0) //百分比
            if (num <= 99) {
              param.onProgress({
                percent: Math.floor(num)
              })
            } else {
              param.onProgress({
                percent: Math.floor(99)
              })
            }
          }
        }).then((res => {
          param.onSuccess();
          this.EtmsCourseAbility.etmsCourse.courseAttachment = res.data.data
          console.log(res);
        })) */
        uploadVideo(formdata).then((res) => {
          param.onSuccess();
          this.EtmsCourseAbility.etmsCourse.courseAttachment = res.data;
          console.log(res);
        });
      },
      /* 移除视频之前 */
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      /* 移除视频 */
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      /* 提交表单 */
      submitForm(formName) {
        /* console.log(data); */
        this.$refs[formName].validate((valid) => {
          if (valid) {
            addCourse(this.EtmsCourseAbility).then(res => {
              if (res) {
                alert('添加课程成功');
              } else {
                console.log('error submit!!');
                return false;
              }

              this.$router.push({
                name: 'CourseManage'
              })

            })
          } else {
            console.log('error submit!!');
            return false;
          }
        });


      },

      resetForm(formName) {
        const name = formName;
        this.$refs[name].resetFields();
      },
      removeCatalog(item) {
        var index = this.EtmsItemAbilityOutline.etmsOutlines.indexOf(item)
        if (index !== -1) {
          this.EtmsItemAbilityOutline.etmsOutlines.splice(index, 1)
        }
      },
      allDepts() {
        findAll().then(res => {
          this.options = res.data
          console.log(res);
        })
      },

    },
    created() {
      /* 动态生成部门选项下拉框 */
      this.allDepts();
    },
  };

</script>

<style scoped>
  .leftModule {
    width: 900px;
    border-radius: 4px;
    margin-left: 30px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    height: 835px;
  }

  .rightModule_two {
    margin-left: 15px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  .title {
    margin-top: 15px;
    color: cadetblue;
    font-size: 20px
  }

  .smallTitle {
    margin-top: 20px;
    color: rgb(236, 141, 52);
    font-size: 18px
  }

  .smallSmallTitle {
    margin-top: 20px;
    color: rgb(109, 116, 121);
    font-size: 15px
  }

  .el-form {
    margin-top: 40px;
    margin-left: 30px;
  }

  .el-row {
    margin-top: 30px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    margin-left: 120px;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-input-number {
    margin-top: 10px;
  }

</style>
